<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Widgets in PHP GTK</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, GTK, Widgets, PHP, programming, Linux">
<meta name="description" content="This part of the PHP GTK tutorial covers widgets.">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Widgets</h1>

<p>
In this part of the PHP GTK programming tutorial, 
we will introduce some widgets.
</p>

<div class="center">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-9706709751191532";
/* top_horizontal */
google_ad_slot = "3327173442";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<p>
Widgets are basic building blocks of a GUI application. Over the years, several widgets became a 
standard in all toolkits on all OS platforms. For example a button, a check box or a scroll bar. 
The GTK toolkit's philosophy is to keep the number of widgets at a minimum level. 
More specialized widgets are created as custom GTK widgets.  
</p>


<h2>GtkCheckButton</h2>

<p>
A <code>GtkCheckButton</code> is a widget, that has two states. On and Off. 
The On state is visualized by a check mark. It is used to denote some boolean
property.
</p>

<pre class="code">
&lt;?php
 
/* 
ZetCode PHP GTK tutorial

This program toggles the title of the
window with the GtkCheckButton widget.

author: Jan Bodnar
website: www.zetcode.com
last modified: August 2011
*/

class Example extends GtkWindow { 
     

    public function __construct() { 

        parent::__construct(); 
         
        $this-&gt;init_ui();

    } 

    private function init_ui() {

        $this-&gt;set_title('Check button');         
        $this-&gt;connect_simple('destroy', array('gtk', 'main_quit')); 

        $fixed = new GtkFixed();
        $this-&gt;add($fixed);
        
        $cb = new GtkCheckButton("Show title");
        $cb-&gt;set_active(true);
        $cb-&gt;connect('clicked', array($this, 'on_clicked'));
        $fixed-&gt;put($cb, 50, 50);     

        $this-&gt;set_default_size(250, 200); 
        $this-&gt;set_position(GTK::WIN_POS_CENTER);
        $this-&gt;show_all();         
    }

    public function on_clicked($sender) {

        if ($sender-&gt;get_active()) {
            $this-&gt;set_title("Check button");
        } else {
            $this-&gt;set_title("");
        }         
    }
} 
     
new Example(); 
Gtk::main();
 
?&gt;
</pre>

<p>
We will display a title in the titlebar of the window,
depending on the state of the <code>GtkCheckButton</code>. 
</p>

<pre class="explanation">
$cb = new GtkCheckButton("Show title");
</pre>

<p>
The <code>GtkCheckButton</code> widget is created. The constructor of the widget
takes one parameter, a label. The label is shown next to the check box.
</p>

<pre class="explanation">
$cb-&gt;set_active(true);
</pre>

<p>
The title is visible by default, so we check the check button by default. 
</p>

<pre class="explanation">
$cb-&gt;connect('clicked', array($this, 'on_clicked'));
</pre>

<p>
If we click on the check box widget a clicked signal is emitted. We hook
the on_clicked() method to the signal. 
</p>

<pre class="explanation">
if ($sender-&gt;get_active()) {
    $this-&gt;set_title("Check button");
} else {
    $this-&gt;set_title("");
}     
</pre>

<p>
We show the title, if the button is checked. The <code>get_active()</code> 
method is used to determine the state of the check button. The
<code>set_title()</code> method is used to set the title of the window. 
To clear the title of the window, we use an empty string. 
</p>


<img src="/img/gui/phpgtk/checkbutton.png" alt="GtkCheckButton">
<div class="figure">Figure: GtkCheckButton</div>


<h2>GtkLabel</h2>

<p>
The <code>GtkLabel</code> widget shows text. No user interaction is 
available with this widget. 
</p>


<pre class="code">
&lt;?php
 
/* 
ZetCode PHP GTK tutorial

In this example, we show a text on the
window. For this, we use the GtkLabel widget.

author: Jan Bodnar
website: www.zetcode.com
last modified: August 2011
*/

class Example extends GtkWindow { 
     

    public function __construct() { 

        parent::__construct(); 
         
        $this-&gt;init_ui();
    } 

    private function init_ui() {

        // no trailing white space!
        $lyrics = &lt;&lt;&lt;LYRICS
Meet you downstairs in the bar and heard
your rolled up sleeves and your skull t-shirt
You say why did you do it with him today?
and sniff me out like I was Tanqueray

cause you're my fella, my guy
hand me your stella and fly
by the time I'm out the door
you tear men down like Roger Moore

I cheated myself
like I knew I would
I told ya, I was trouble
you know that I'm no good
LYRICS;

        $this-&gt;set_title('GtkLabel');         
        $this-&gt;connect_simple('destroy', array('gtk', 'main_quit')); 

        $this-&gt;set_border_width(10);
        $label = new GtkLabel($lyrics);
        $this-&gt;add($label);

        $this-&gt;set_default_size(250, 200); 
        $this-&gt;set_position(GTK::WIN_POS_CENTER);
        $this-&gt;show_all();         
    }
} 
     
new Example(); 
Gtk::main();
 
?&gt;
</pre>

<p>
The code example shows some lyrics on the window. 
</p>

<pre class="explanation">
    // no trailing white space!
    $lyrics = &lt;&lt;&lt;LYRICS
Meet you downstairs in the bar and heard
your rolled up sleeves and your skull t-shirt
</pre>

<p>
We create a multi-line text. In PHP, a multi-line text 
can be created using the heredoc syntax.
</p>

<pre class="explanation">
$this-&gt;set_border_width(10);
</pre>

<p>
The <code>GtkLabel</code> is surrounded by some empty space. 
</p>

<pre class="explanation">
$label = new GtkLabel($lyrics);
$this-&gt;add($label);
</pre>

<p>
The <code>GtkLabel</code> widget is created and added to the window. 
</p>

<img src="/img/gui/phpgtk/label.png" alt="GtkLabel Widget">
<div class="figure">Figure: GtkLabel Widget</div>


<h2>GtkEntry</h2>

<p>
The <code>GtkEntry</code> is a single line text entry field. This widget 
is used to enter textual data. 
</p>

<pre class="code">
&lt;?php
 
/* 
ZetCode PHP GTK tutorial

This example demonstrates the GtkEntry widget.

author: Jan Bodnar
website: www.zetcode.com
last modified: August 2011
*/

class Example extends GtkWindow { 
     
    private $label;

    public function __construct() { 

        parent::__construct(); 
         
        $this-&gt;init_ui();

    } 

    private function init_ui() {

        $this-&gt;set_title('GtkEntry');         
        $this-&gt;connect_simple('destroy', array('gtk', 'main_quit')); 

        $fixed = new GtkFixed();              

        $this-&gt;label = new GtkLabel("...");
        $fixed-&gt;put($this-&gt;label, 60, 40);

        $entry = new GtkEntry();
        $fixed-&gt;put($entry, 60, 100);
        $entry-&gt;connect('key_release_event', array($this, 'on_key_release'));

        $this-&gt;add($fixed); 

        $this-&gt;set_default_size(250, 200); 
        $this-&gt;set_position(GTK::WIN_POS_CENTER);
        $this-&gt;show_all();         
    }

    public function on_key_release($sender, $event) {

        $this-&gt;label-&gt;set_text($sender-&gt;get_text());
    }
} 
     
new Example(); 
Gtk::main();
 
?&gt;
</pre>

<p>
This example shows an entry widget and a label. The text that we key in the 
entry is displayed immediately in the label widget. 
</p>

<pre class="explanation">
$entry = new GtkEntry();
</pre>

<p>
<code>GtkEntry</code> widget is created. 
</p>

<pre class="explanation">
$entry-&gt;connect('key_release_event', array($this, 'on_key_release'));
</pre>

<p>
We plug the the on_key_release() method to the <code>key_release_event</code> of the 
<code>GtkEntry</code> widget. 
</p>

<pre class="explanation">
public function on_key_release($sender, $event) {

    $this-&gt;label-&gt;set_text($sender-&gt;get_text());
}
</pre>

<p>
Inside the method, we get the text from the <code>GtkEntry</code> widget via the 
<code>get_text()</code> method and set it to the label using the <code>set_text()</code>
method of the label. 
</p>

<img src="/img/gui/phpgtk/entry.png" alt="GtkEntry Widget">
<div class="figure">Figure: GtkEntry Widget</div>


<h2>GtkImage</h2>

<p>
The <code>GtkImage</code> widget shows an image.
</p>

<pre class="code">
&lt;?php
 
/* 
ZetCode PHP GTK tutorial

This example demonstrates the GtkImage widget.

author: Jan Bodnar
website: www.zetcode.com
last modified: August 2011
*/

class Example extends GtkWindow { 
     

    public function __construct() { 

        parent::__construct(); 
         
        $this-&gt;init_ui();

    } 

    private function init_ui() {

        $this-&gt;set_title('Red Rock');         
        $this-&gt;connect_simple('destroy', array('gtk', 'main_quit')); 
        
        $this-&gt;set_border_width(2);
        $image = GtkImage::new_from_file("redrock.png");                        
        $this-&gt;add($image);

        $this-&gt;set_default_size(250, 200); 
        $this-&gt;set_position(GTK::WIN_POS_CENTER);
        $this-&gt;show_all();         
    }
} 
     
new Example(); 
Gtk::main();
 
?&gt;
</pre>

<p>
In our example, we show an image on the window. 
</p>

<pre class="explanation">
$this-&gt;set_border_width(2);
</pre>

<p>
We put some empty border around the image. 
</p>

<pre class="explanation">
$image = GtkImage::new_from_file("redrock.png");
</pre>

<p>
The <code>GtkImage</code> widget is created. We load the image from 
the file using the static <code>new_from_file()</code> method. 
If the file isn't found or can't be loaded, the resulting 
GtkImage will display a broken image icon.
</p>

<pre class="explanation">
$this-&gt;add($image);
</pre>

<p>
Widget is added to the container.
</p>


<h2>GtkComboBox</h2> 
 
<p> 
A <code>ComboBox</code> is a widget that allows the user to 
choose from a list of options.
</p> 
 
<pre class="code"> 
&lt;?php

/* 
ZetCode PHP GTK tutorial

This example demonstrates the GtkComboBox widget

author: Jan Bodnar
website: www.zetcode.com
last modified: August 2011
*/

class Example extends GtkWindow { 
     
    private $label;

    public function __construct() { 

        parent::__construct(); 
         
        $this-&gt;init_ui();

    } 

    private function init_ui() {

        $this-&gt;set_title('GtkComboBox');         
        $this-&gt;connect_simple('destroy', array('gtk', 'main_quit')); 
        
        $fixed = new GtkFixed();
        $this-&gt;label = new GtkLabel('-');
        $fixed-&gt;put($this-&gt;label, 50, 140);

        $cb = GtkComboBox::new_text();
        $cb-&gt;connect('changed', array($this, 'on_changed'));
        
        $cb-&gt;append_text('Ubuntu');
        $cb-&gt;append_text('Mandriva');
        $cb-&gt;append_text('Redhat');
        $cb-&gt;append_text('Gentoo');
        $cb-&gt;append_text('Mint');

        $fixed-&gt;put($cb, 50, 30);

        $this-&gt;add($fixed);

        $this-&gt;set_default_size(250, 200); 
        $this-&gt;set_position(GTK::WIN_POS_CENTER);
        $this-&gt;show_all();         
    }

    public function on_changed($sender) {
        $this-&gt;label-&gt;set_label($sender-&gt;get_active_text());
    }
} 
     
new Example(); 
Gtk::main();
 
?&gt;
</pre> 
 
<p> 
The example shows a combo box and a label. The combo box has a list of five options. 
These are the names of Linux Distros. The label widget shows the 
selected option from the combo box. 
</p> 
 
<pre class="explanation">
$cb = GtkComboBox::new_text();
</pre> 
 
<p> 
The <code>GtkComboBox</code> widget is created. The <code>new_text()</code> is a method, that
creates a <code>GtkComboBox</code> just displaying strings.
</p> 
 
<pre class="explanation">
$cb-&gt;append_text('Ubuntu');
$cb-&gt;append_text('Mandriva');
$cb-&gt;append_text('Redhat');
$cb-&gt;append_text('Gentoo');
$cb-&gt;append_text('Mint');
</pre> 
 
<p> 
It is filled with data. 
</p> 
 
<pre class="explanation">
public function on_changed($sender) {
    $this->label->set_label($sender->get_active_text());
}
</pre> 
 
<p> 
Inside the <code>on_changed()</code> method, we get the selected
text out of the combo box and set it to the label. 
</p> 


<img src="/img/gui/phpgtk/combo.png" alt="GtkComboBox"> 
<div class="figure">Figure: GtkComboBox</div> 


<p>
In this chapter of the PHP GTK tutorial, we showed some basic widgets.
</p>

<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified August 27, 2011  <span class="copyright">&copy; 2007 - 2013 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>

